<template>
    <div class="layout">
        <Card>
            <p slot="title">测试动态样式的写法</p>
            <div>
                <p :style="{color:color}">这里的文字是动态改变颜色的</p>
                <p :style="styles">这里的文字是动态改变颜色的</p>
                <ul>
                    <li ></li>
                </ul>
            </div>
        </Card>
    </div>
</template>
<script>
import { setInterval } from 'timers';
    export default {
        data(){
            return{
                color:'',
                styles:{
                    'font-size':0?'18px':'14px',
                    'color':1?'red':'gray'
                }
            }
        },
        
        beforeCreate(){
        },
        created(){
            
        },
        beforeMount(){},
        mounted(){
            this.colorFun()
        },
        beforeUpdate(){},
        updated(){},
        beforeDestroy(){},
        computed:{
            
        },
        methods:{
            colorFun(){
                let colors=['green','#f00','blue','#333','orange'];
                setInterval(()=>{
                    let color=colors[Math.floor(Math.random()*4)];
                    console.log(color);
                    this.color=color;
                    // this.styles.color=color;
                    
                },2000)
            }
        },
        watch:{},
        filters:{}
    }
</script>
<style lang="less">

</style>